<template>
     <dv-border-box-7 :color="['#084FA0','#06073B']" style="height: 274px;margin-bottom: 18px;">
        <div class="summary-box">
            <div class="data-box">
                <div>
                    <div class="text-box">
                        <div class="text-city">
                            <CountUp :end-val=12 :duration="3"></CountUp>
                        </div>
                        <span>助餐点</span>
                    </div>
                </div>

                <div>
                    <div class="text-box">
                        <div class="text-area">
                            <CountUp :end-val="10" :duration="2.5"></CountUp>
                        </div>
                        <span>街道/乡镇</span>
                    </div>
                </div>

                <div>
                    <div class="text-box">
                        <div class="text-member">
                            <CountUp :end-val="5720" :duration="2"></CountUp>
                        </div>
                        <span>服务会员</span>
                    </div>
                </div>

            </div>

            <div class="data-box">
                <div>
                    <div class="text-box">
                        <div class="text-sale">
                            <CountUp :end-val="164" :duration="2"></CountUp>
                        </div>
                        <span>服务金额（万元）</span>
                    </div>
                </div>

<!--                <div>-->
<!--                    <div class="text-box">-->
<!--                        <div class="text-order">-->
<!--                            <CountUp :end-val="80" :duration="2.5"></CountUp>-->
<!--                        </div>-->
<!--                        <span>累计订单(万单)</span>-->
<!--                    </div>-->
<!--                </div>-->

<!--                <div>-->
<!--                    <div class="text-box">-->
<!--                        <div class="text-sale">-->
<!--                            <CountUp :end-val="164" :duration="2"></CountUp>-->
<!--                        </div>-->
<!--                        <span>累计销量(万元)</span>-->
<!--                    </div>-->
<!--                </div>-->

            </div>
        </div>
     </dv-border-box-7>
</template>

<script>
import CountUp from 'vue-countup-v3'

export default {
    components:{
     CountUp
   },
    data(){
        return {

        }
    },
    methods:{},
    mounted(){


    }
}

</script>

<style lang="scss" scoped>
.dv-border-box-7{
    border-radius: 3px;
}

:deep(.dv-border-svg-container) {
  display: none;
}

.summary-box{
    box-sizing: border-box;
    height: 100%;
    // border: 1px solid red;
}

.data-box:nth-child(1){
    margin-top: 20px;
    margin-bottom: 10px;
}


.data-box{

    box-sizing: border-box;
    display: flex;
    & >div{
        position: relative;
        flex: 1;
        width: 200px;
        height: 100px;
        // border: 1px solid red;
        display: flex;
        flex-direction: row;
        // justify-content:center;
        align-items: center;
    }

    .text-box{
        box-sizing: border-box;
        // border: 1px solid orange;
        height: 50px;
        margin-left: 130px;
    }

    .text-box>span{
        color: #4FA6F7;
        font-size: 19px;
    }

}

div.text-city{
    color: #0E8BFF;
    font-family: dpFont;
    font-size: 33px;
    &::before{
    position: absolute;
    content: "";
    width: 106px;
    height: 110px;
    left: 40px;
    top: 10px;
    background-image: url("../../assets/icons/eatcity.png");
    background-repeat: no-repeat;
    background-size: 80%;
    }

}

div.text-area{
    color: #0DDE9C;
    font-family: dpFont;
    font-size: 33px;
    &::before{
    position: absolute;
    content: "";
    width: 106px;
    height: 110px;
    left: 40px;
    top: 10px;
    background-image: url("../../assets/icons/eatarea.png");
    background-repeat: no-repeat;
    background-size: 80%;
    }
}

div.text-shop{
    color: #1CDBFE;
    font-family: dpFont;
    font-size: 33px;
    &::before{
    position: absolute;
    content: "";
    width: 106px;
    height: 110px;
    left: 40px;
    top: 10px;
    background-image: url("../../assets/icons/eatshop.png");
    background-repeat: no-repeat;
    background-size: 80%;
    }

}

div.text-member{
    color: #FB9A44;
    font-family: dpFont;
    font-size: 33px;
    &::before{
    position: absolute;
    content: "";
    width: 106px;
    height: 110px;
    left: 40px;
    top: 10px;
    background-image: url("../../assets/icons/eatmember.png");
    background-repeat: no-repeat;
    background-size: 80%;
    }

}

div.text-order{
    color: #8445ED;
    font-family: dpFont;
    font-size: 33px;
    &::before{
    position: absolute;
    content: "";
    width: 106px;
    height: 110px;
    left: 40px;
    top: 10px;
    background-image: url("../../assets/icons/eatorder.png");
    background-repeat: no-repeat;
    background-size: 80%;
    }

}

div.text-sale{
    color: #E4C431;
    font-family: dpFont;
    font-size: 33px;
    &::before{
    position: absolute;
    content: "";
    width: 106px;
    height: 110px;
    left: 40px;
    top: 10px;
    background-image: url("../../assets/icons/eatsale.png");
    background-repeat: no-repeat;
    background-size: 80%;
    }

}









</style>
